<template>
  <div>
    <el-button type="primary" size="mini" round>外卖配送
    </el-button
    >
    <el-button style="background-color:#ADD8E6; color: #191970" size="mini" round>到店自取</el-button>
    <div>
      <div style="margin: 10px 0" v-show="!address.length" @click="jump('/address',{get:1})">选择收货地址</div>
    </div>
    <el-card style="margin-bottom: 10px">
      <div style="display: flex;justify-content: space-between">
        <span>送达时间</span>
        <span class="blue">尽快送达</span>
      </div>
      <el-divider></el-divider>
      <div style="display: flex;justify-content: space-between">
        <span>支付方式</span>
        <span class="blue">支付宝</span>
      </div>
    </el-card>
    <el-card style="margin-bottom: 10px">
      <p>店铺名称</p>
      <el-row v-for="i in 3" :key="i" style="margin-bottom: 7px">
        <el-col :span="4">
          <el-avatar shape="square"
                     src="http://img4.imgtn.bdimg.com/it/u=3320342957,60003677&fm=26&gp=0.jpg"></el-avatar>
        </el-col>
        <el-col :span="11">土豆片</el-col>
        <el-col :span="1" style="color: grey">x1</el-col>
        <el-col :span="8" style="text-align: right">￥10</el-col>
      </el-row>
      <el-row style="margin-bottom: 10px">
        <el-col :span="3" style="font-size: 12px;background-color: #99a9bf;color: #475669">包装费
        </el-col>
        <el-col :span="12" :offset="1" style="font-size: 14px;color: grey">餐盒</el-col>

        <el-col :span="8" style="text-align: right">￥2.5</el-col>
      </el-row>
      <div style="display: flex;justify-content: space-between">
        <span>红包/抵用券</span>
        <span style="color: white;background-color:#ff4500;font-size: 12px">选择地址后使用红包</span>
      </div>
      <el-divider></el-divider>
      <div style="display: flex;justify-content: space-between">
        <span style="font-size: 12px;color: grey">优惠说明</span>
        <span>小计 ￥32.5</span>
      </div>
    </el-card>
    <el-card style="margin-bottom: 10px">
      <div style="display: flex;justify-content: space-between">
        <span>订单备注</span>
        <span class="grey">口味、偏好</span>
      </div>
      <el-divider></el-divider>
      <div style="display: flex;justify-content: space-between">
        <span>餐具份数</span>
        <span class="grey">未选择</span>
      </div>
      <el-divider></el-divider>
      <div style="display: flex;justify-content: space-between">
        <span>发票信息</span>
        <span class="grey">该店不支持线上开票，请电话联系商户</span>
      </div>
    </el-card>
    <div style="background-color:#696969;display: flex;justify-content: space-between" @click="payment=true">
      <span style="margin: 15px;color: white">￥32.5</span>
      <el-button style="margin: 5px" type="success">去结算</el-button>
    </div>
    <el-drawer
      title="确认付款"
      :visible.sync="payment"
      direction='btt'
      size="70%"
      :wrapperClosable =false
      :close-on-press-escape= false
      :before-close="pay"
      >
      <div style="margin: 20px 20px 50px">
        <div style="text-align: center;font-size: 26px">￥32.50</div>
        <div style="display: flex;justify-content: space-between;font-size: 14px;">
          <span class="grey" style="font-size: 14px">送达时间</span>
          <span>商店名称</span>
        </div>
        <el-divider></el-divider>
        <div style="display: flex;justify-content: space-between;font-size: 14px;">
          <span class="grey" style="font-size: 14px">支付方式</span>
          <span>花呗</span>
        </div>
        <el-divider></el-divider>
      </div>
      <el-button type="primary" @click="jump('/orderDetail',{'status':'Paid'})">立即付款</el-button>
    </el-drawer>

  </div>

</template>

<script>
    export default {
        name: "ConfirmOrder",
        data() {
            return {
                address: [],
                payment: false,
            }
        },
        methods: {
            jump(route, param) {
                this.$router.push({path: route, query: param});
            },
            getAddress() {
                this.address = JSON.parse(this.$ls.get('address')) || [];
            },
            pay(){
                this.jump('/orderDetail',{'status':'noPaid'});
            }
        },
        // created() {
        //     this.getAddress();
        // }
    }
</script>

<style scoped>
  .el-divider {
    margin: 10px 0;
  }

  .blue {
    color: #409EFF;
  }

  .grey {
    color: grey;
    font-size: 12px;
  }
</style>
